<!-- 个人中心 -->
<template>
  <div>
    <el-card class="box-card left">
      <div slot="header" class="clearfix">
        <span>个人信息</span>
      </div>
      <ul class="item" :model="user">
        <li style="text-align: center; position: relative">
          <el-avatar
            :size="100"
            :src="avatar"
            v-if="avatar != '无' && avatar != null"
            style="cursor: pointer"
          ></el-avatar>
          <el-avatar
            :size="100"
            :src="avatar_src"
            v-else
            style="cursor: pointer"
          ></el-avatar>
          <span class="cropper-avatar" @click="editAvatar"
            ><i class="el-icon-plus"></i
          ></span>
          <personUpload
            :editAvatarDialog.sync="editAvatarDialog"
            :option.sync="option"
            :avatar.sync="avatar"
            :ruleForm.sync="ruleForm"
          ></personUpload>
        </li>
        <li>
          <i class="iconfont icon-yonghu"></i>用户名称
          <span class="msg" v-if="user.username">{{ user.username }}</span>
          <span class="msg" v-else>暂无</span>
        </li>
        <li>
          <i class="iconfont icon-name1"></i>真实姓名
          <span class="msg" v-if="user.real_name">{{ user.real_name }}</span>
          <span class="msg" v-else>暂无</span>
        </li>
        <li>
          <i class="iconfont icon-xingbie-weizhi"></i>性别
          <span class="msg" v-if="user.gender == 'UNKNOWN'">保密</span>
          <span class="msg" v-else-if="user.gender == 'MALE'">男</span>
          <span class="msg" v-else>女</span>
        </li>
        <li>
          <i class="iconfont icon-nianling"></i>年龄
          <span class="msg" v-if="user.age">{{ user.age }}</span>
          <span class="msg" v-else>暂无</span>
        </li>
        <li>
          <i class="iconfont icon-bumen"></i>所属部门
          <span class="msg" v-if="user.common_name">{{
            user.common_name
          }}</span>
          <span class="msg" v-else>暂无</span>
        </li>
        <li>
          <i class="iconfont icon-youxiang"></i>电子邮箱
          <span class="msg" v-if="user.email">{{ user.email }}</span>
          <span class="msg" v-else>暂无</span>
        </li>
        <li>
          <i class="iconfont icon-dianhua"></i>电话号码
          <span class="msg" v-if="user.phone_number">{{
            user.phone_number
          }}</span>
          <span class="msg" v-else>暂无</span>
        </li>
        <li>
          <i class="iconfont icon-qq"></i>QQ号码
          <span class="msg" v-if="user.qq_number">{{ user.qq_number }}</span>
          <span class="msg" v-else>暂无</span>
        </li>
        <li>
          <i class="iconfont icon-weixin1"></i>微信号码
          <span class="msg" v-if="user.wechat_number">{{
            user.wechat_number
          }}</span>
          <span class="msg" v-else>暂无</span>
        </li>
        <li>
          <i class="iconfont icon-xiangqingjieshao"></i>自我介绍
          <span class="msg" v-if="user.description">{{
            user.description
          }}</span>
          <span class="msg" v-else>暂无</span>
        </li>
      </ul>
    </el-card>
    <el-card class="box-card right">
      <div slot="header" class="clearfix">
        <span>基本资料</span>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="用户管理" name="first">
          <personUser
            :ruleForm="ruleForm"
            :getUser="getUser"
            :goBack="goBack"
          ></personUser>
        </el-tab-pane>
        <el-tab-pane label="修改密码" name="second">
          <personPass
            :ruleForm="ruleForm"
            :changepsd="changepsd"
            :goBack="goBack"
          ></personPass>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapState } from "vuex";
import personUser from "@/components/personCenter/personUser.vue";
import personPass from "@/components/personCenter/personPass.vue";
import personUpload from "@/components/personCenter/personUpload.vue";
export default {
  components: {
    personUser,
    personPass,
    personUpload,
  },
  data() {
    return {
      avatar_src:
        "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
      activeName: "first",
      changepsd: {
        password: "",
        checkPass: "",
        captcha: "",
        radio: "phone",
      },
      //修改头像
      editAvatarDialog: false,
      option: {
        img: "", // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 1, // 剪切后的图片质量（0.1-1）
        full: true, // 输出原图比例截图 props名full
        outputType: "png", // 裁剪生成额图片的格式
        canMove: true, // 能否拖动图片
        original: false, // 上传图片是否显示原始宽高
        canMoveBox: true, // 能否拖动截图框
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 150,
        autoCropHeight: 150,
        fixedBox: true, // 截图框固定大小
      },
    };
  },
  computed: {
    ...mapGetters(["username", "authority", "avatar"]),
    ...mapState("personCenter", ["user", "ruleForm"]),
  },
  created() {
    this["getUser"]();
    this.activeName = sessionStorage.getItem("activeName") || "first";
    this.changepsd.radio = sessionStorage.getItem("radio") || "phone";
  },
  methods: {
    ...mapActions("personCenter", ["getUser"]),
    handleClick(tab, event) {
      this.activeName = tab.name;
      sessionStorage.setItem("activeName", this.activeName);
    },
    goBack() {
      this.$router.push({ path: "/admin" });
    },
    //修改头像
    editAvatar() {
      this.editAvatarDialog = true;
      this.option.img =
        this.$store.getters.avatar == "无"
          ? this.avatar_src
          : this.$store.getters.avatar;
    },
  },
};
</script>

<style lang='scss'>
@import "@/assets/css/personCenter.scss";
</style>
